﻿<template>
    <div class="ad-content">
        <div class="ad-tree">
            <div class="ad-title">
                <span>村/社区管理</span>
            </div>
            <div class="ad-treebody">
                <adp-tree ref="adptree" node-key="StreetID" node-expanded-key="Npath" @click="treeclick" @load="treeload"></adp-tree>
            </div>
        </div>
        <div class="ad-main">
            <div class="ad-console-top">
                <div class="ad-console-top-name">村/社区</div>
                <div class="ad-console-top-body">
                </div>
                <div class="ad-console-top-end">
                </div>
            </div>
            <div class="ad-console-body">
                <div class="ad-console-toolbar">
                    <el-button type="primary" size="small" icon="icon-plus4 el-icon--left" @click="openDialog()">添加村/社区</el-button>
                    <el-button type="primary" size="small" icon="icon-trash-o el-icon--left" @click="del()">批量删除</el-button>
                    <div style="float:right;">
                        <el-input v-model="searchkey" prefix-icon="el-icon-search" placeholder="请输入村/社区" @keyup.enter.native="search()" style="width:180px;" size="small"></el-input>
                        <el-button type="primary" size="mini" icon="icon-search el-icon--left" @click="search()" style="padding: 7px 10px;">搜索</el-button>
                    </div>
                </div>
                <div class="ad-card">
                    <el-table ref="tbl" size="mini" :data="plist" border style="width: 100%" @selection-change="SelectionChange" @cell-click="CellClick">
                        <el-table-column type="selection" width="50" align="center"></el-table-column>
                        <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
                        <el-table-column prop="Name" label="村/社区" header-align="left">
                        </el-table-column>
                        <el-table-column prop="Street" label="镇街名称" width="200" align="center">
                        </el-table-column>
                        <el-table-column prop="Tactic" label="排序" width="90" align="center">
                            <template slot-scope="scope">
                                <el-input-number :id="scope.row.CommunityID" v-model="scope.row.Tactic" size="small" :controls="false" @blur="blur(scope.row)" v-if="scope.row.Sort" style="width:66px;"></el-input-number>
                                <span v-if="!scope.row.Sort">{{scope.row.Tactic}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Instime" label="创建时间" width="110" align="center"></el-table-column>
                        <el-table-column label="操作" :width="90" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="openDialog(scope.row.CommunityID)">编辑</el-button>
                                <el-button type="text" size="mini" @click="del(scope.row.CommunityID)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br />
                    <div style="text-align:center"><el-pagination v-if="count>0" background layout="prev, pager, next" :current-page="currentpage" :total="count" @current-change="pagerclick"></el-pagination></div>
                </div>
            </div>
            <el-dialog :title="title" class="dlg" v-dialogDrag :visible="showDialog" width="550px" @close="closeDialog()">
                <el-form :model="form" status-icon :rules="rules" ref="form" label-width="80px">
                    <el-form-item label-width="0px">
                        <el-col :span="24">
                            <el-form-item label="村/社区" prop="Name">
                                <el-input v-model="form.Name"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-col :span="24">
                            <el-form-item label="所属镇街" prop="StreetID">
                                <el-select v-model="form.StreetID" placeholder="请选择镇街"  style="width:410px">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-col :span="24">
                            <el-form-item label="temp" prop="Remark">
                                <span slot="label">说<span style="margin-left:23px;">&nbsp;</span>明</span>
                                <el-input v-model="form.Remark" type="textarea" :rows="5"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item style="margin-bottom:0px;">
                        <el-button type="primary" @click="submit">提交</el-button>
                        <el-button type="info" @click="closeDialog">关闭</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            let NameExists = (rule, value, callback) => {
                App.Service.post('/plus/Yqd/Community/NameExists', { StreetID: this.form.StreetID, CommunityID: this.form.CommunityID, Name: value }, { noMask: true }).then(function (res) {
                    if (res.success) {
                        callback(rule.message);
                    }
                    else {
                        callback();
                    }
                });
            }
            return {
                Title: '',
                plist: [],
                StreetID: '',
                CommunityIDs: [],
                options: [],
                showDialog: false,
                count: 0,
                currentpage: 0,
                searchkey: '',
                form: {
                    CommunityID: 0,
                    StreetID: '',
                    Name: '',
                    Remark: ''
                },
                rules: {
                    Name: [
                        { required: true, message: '请输入村/社区', trigger: 'blur' },
                        { validator: NameExists, message: '该村/社区已存在', trigger: 'blur' }
                    ],
                    StreetID: [
                        { required: true, message: '请选择镇街名称', trigger: 'blur' }
                    ]
                }
            }
        },
        mounted() {
            App.Page.init(this);
        },
        methods: {
            treeclick(node, hit) {
                this.StreetID = node.data.StreetID;
                this.searchkey = '';
                this.load();
            },
            treeload(node, resolve) {
                var id = -1;
                if (node.data != null) id = node.data.StreetID;
                App.Service.post("/plus/Yqd/Street/GetStreetList", { checknode: true, node: id }).then((res) => {
                    if (res.success) {
                        resolve(res.data);
                    }
                });
            },
            load() {
                App.Service.post("/plus/Yqd/Community/GetList", { start: App.Fn.toStart(this.currentpage), limit: App.pagesize, StreetID: this.StreetID, searchkey: this.searchkey }).then((res) => {
                    if (res.success) {
                        this.count = res.totalcount;
                        res.data.forEach(row => row.Sort = false);
                        this.plist = res.data;
                    }
                });
            },
            loadstreet() {
                App.Service.post("/plus/Yqd/Street/GetStreetList", { checknode: false}).then((res) => {
                    if (res.success) {
                        this.options = res.streets;
                    }
                });
            },
            CellClick(row, column, cell, event) {
                if (cell.cellIndex == 5 && !row.Sort) {
                    row.Sort = true;
                    this.$nextTick(function () {
                        var input = document.getElementById(row.CommunityID);
                        input.childNodes[2].lastElementChild.focus();
                    });
                }
            },
            blur(row) {
                App.Service.post("/plus/Yqd/Community/UpdateTop", { CommunityID: row.CommunityID, tops: row.Tactic }).then((res) => {
                    if (res.success) {
                        this.load();
                    }
                });
            },
            pagerclick(currentpage) {
                this.currentpage = currentpage;
                this.load();
            },
            search() {
                this.currentpage = 0;
                this.load();
            },
            openDialog(cID) {
                this.title = '添加村/社区';
                this.loadstreet();
                this.form.StreetID = '';
                if (cID == undefined) {
                    if (this.StreetID > 0) this.form.StreetID = this.StreetID;
                    this.showDialog = true;
                    return;
                }
                this.title = '编辑村/社区';
                App.Service.post("/plus/Yqd/Community/Get", { CommunityID: cID }).then((res) => {
                    if (res.success) {
                        this.form = res.data;
                        this.showDialog = true;
                    }
                });
            },
            closeDialog() {
                this.showDialog = false;
                this.reset();
            },
            reset() {
                this.form = {
                    CommunityID: 0,
                    StreetID:'',
                    Name: '',
                    Remark: ''
                };
                this.$refs['form'].resetFields();
            },
            submit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        App.Service.post("/plus/Yqd/Community/" + (this.form.CommunityID > 0 ? "Edit" : "Add"), this.form).then((res) => {
                            if (res.success) {
                                this.closeDialog();
                                this.load();
                            }
                        });
                        return;
                    }
                });
            },
            del(cID) {
                if (cID != undefined) {
                    this.CommunityIDs = [];
                    this.CommunityIDs.push(cID);
                }
                if (this.CommunityIDs.length == 0) return;
                App.Page.confirm("您确认要删除当前记录吗? ", () => {
                    App.Service.post("/plus/Yqd/Community/Delete", { CommunityID: this.CommunityIDs }).then((res) => {
                        if (res.success) {
                            this.load();
                        }
                    });
                });
            },
            SelectionChange(val) {
                this.CommunityIDs = val.map(row => row.CommunityID);
            }
        }
    };
</script>